フロントエンドエンジニアの仕事内容とは？現役エンジニアが解説します。
最終更新日：
- フロントエンドエンジニアに興味があるけど、フロントエンドエンジニアって何？
DAI
今回はこのような疑問に、現役エンジニアが回答します。
フロントエンドエンジニアとは、Webサイトの見た目の部分の実装を担当するエンジニアを指します。
Webアプリの開発には、サーバーサイド（バックエンド）とフロントエンドがあり、そのフロントエンドを主に担当するエンジニアです。
この記事では、
- フロントエンドエンジニアとは何か
- フロントエンドエンジニアの仕事内容
- フロントエンドエンジニアのなりかた
などについて解説していきたいと思います。
目次 (PRも含まれます）
フロントエンドとバックエンドとは？
フロントエンドとバックエンドはウェブアプリやホームページの開発における重要な要素で、それぞれ異なる役割を果たします。
それぞれをまずは理解していきましょう。
フロントエンドとは？
フロントエンドはユーザーが直接触れる部分、つまりウェブサイトやアプリの見た目やUIを担当します。
例えばログイン機能のIDやパスワード入力画面の作成や、入力制限の設定などがフロントエンドの仕事です。
バックエンドとは？
一方、バックエンドはフロントエンドから送られてきた情報をサーバーが受け取り、データベースとのやり取りや外部サービスとの連携、複雑な計算処理などを行います。
DAI
つまり、フロントエンドがユーザーと直接対話する部分を、バックエンドが裏側でのデータ処理や連携を担当するというわけですね。
フロントエンドエンジニアの仕事内容
次にフロントエンドエンジニアの仕事内容について解説します。
フロントエンドエンジニアとは、1つの言葉で広い職種を含んでいます。
基本的にホームページの制作を行っているフロントエンドエンジニアは、コーダーという名前で呼ばれることもあります。Webアプリを開発しているエンジニアの方を基本的にはフロントエンドエンジニアと指しているケースが多いです。
フロントエンドエンジニアの「コーダー」とは
コーダーの主な仕事内容は、デザインが渡された企業のホームページやランディングページに対して、HTML、CSS、JQueryを基にコーディングするすることです。
コーダーは基本的には主にWordPressやランディングページのコーディング（マークアップ）を主に対応します。
デザイナーさんからもらったデザインファイル（ホームページのデザインがまとまったファイルのこと）を元に、デザインの通りにHTMLやCSSをコーディングしていくようなお仕事が中心になります。
ウェブアプリケーション開発のフロントエンドエンジニアの仕事内容
もうひとつがWebアプリケーションを開発するフロントエンドエンジニアです。
ウェブアプリケーションを開発するフロントエンドエンジニアの仕事内容は、コーダーとは少し異なります。
基本的に彼らが作るのはウェブアプリケーションです。
Webアプリケーションとは例えば、
- ログイン機能
- 決済機能
- フォロー機能
などがあるようなものをウェブアプリケーションと呼びます。
ウェブアプリケーションの場合、バックエンドのロジックが複雑なケースが多く、大量のビッグデータを集計してその中身をフロントエンドを通して取得するような処理を行うことがあります。
近年、Webアプリ開発において、フロントエンドエンジニアがデザインとマークアップを兼任する体制が、特にウェブアプリ開発界隈で増えています。その場合、ワイヤーフレーム作成や、Figmaを使ったデザインコンポーネントの作成、Adobe XDでのワイヤーとデザインの作成などのスキルが求められることがあります。コーダーとウェブアプリ開発のフロントエンドエンジニアの仕事内容は大いに異なるので、その点を理解しておくことが重要です。
フロントエンドエンジニアに必要なスキルや知識
次に、フロントエンド開発について解説していきます。前述したとおり、フロントエンドエンジニアにはウェブ制作系とウェブアプリケーション開発系があり、それぞれ求められるスキルセットが異なります。
ウェブ制作会社で働くコーダー的フロントエンドエンジニアのスキルセット
ウェブ制作会社で働くコーダーには、UI開発に必要なHTML、CSS、JavaScriptなどの言語が必要です。また、ウェブアプリ開発のフロントエンドエンジニアと異なり、jQueryの知識が求められることがあります。
jQueryはJavaScriptのフレームワークですが、JQueryの新規開発は停止しています。そのため廃れるのでは？と思われていましたが、ウェブ制作ではまだ現役で利用されているため、学習しておくと良いでしょう。
また、ウェブ制作会社では、デザインとマークアップを兼任することもあります。その場合、Photoshopやイラストレーターなどのデザインツールの使用経験が必要です。
また、Adobe XDやFigmaなどのツールを使用してワイヤーフレームを作成できる能力も求められます。最低限、HTML、CSS、JavaScript、JQueryの知識は必要になります。
また、ホームページやランディングページなどを作る性質上、SEO対策の知識なども必要とされます。また、WordPressなどのCMS開発の知識も必要になる場合、サーバーサイド側ではPHPの言語の習得が必要になるケースがあります。
ウェブアプリケーション開発のフロントエンドエンジニアの必要スキル
ウェブアプリケーション開発のフロントエンドエンジニアには、コーダーと同様にHTML、CSS、JavaScriptの基本的な知識が必要です。加えて、ReactやVueなどのJavaScriptのウェブフレームワークを使いこなせることが求められます。これらのフレームワークは、日本のウェブアプリケーション開発において主流となっており、JavaScriptのフレームワークの学習は必須です。
さらに、バックエンドとの接続を行うためのREST APIやGraphQLの知識、実装能力が必要です。ウェブアプリケーション開発においては、クラウドインフラの知識も重要となることがあります。Heroku、AWS、GCPなどのPaaSを利用したサービスのデプロイ経験やLinuxコマンドの知識も必要です。
フロントエンドエンジニアの年収は？
次にフロントエンドエンジニアの年収について見ていきたいと思います。
DAI
個人的にあまりフロントエンドエンジニアの年収統計情報などを見てもあまり参考にならないと考えているので、実際に私が一緒には働いてきた人の年収相場についてご説明ができればなと思います。
フロントエンドエンジニアの正社員の年収について
まずフロントエンドエンジニアの正社員の年収ですが、これは例えば「Reactがかけるからいくら」というふうに決まっているわけではなく、エンジニアであればジュニアだったら（1-3年目）大体このくらい、といった形で単価が決まっています。
また、IT系のメガベンチャーのような企業であれば、未経験でも非常に高く報酬を出すケースもありますし、逆にSESや受託であまり儲かってないような会社さんですと、5年目で技術力は非常に高いのにメガベンチャーの新卒よりも給料が低いようなケースもあり得えます。
フロントエンドエンジニアの正社員の年収でいうと、大体以下のような感じです。
- 新卒~未経験：350万から450万
- 業務経験が3年から5年：大体450万から600万
- 6年目以降〜：600万円〜
そこからさらに管理職やVPまでいかないけれどもチームリーダーなどになっていくと、800万円以降が狙えてくるというような形になります。
フロントエンドエンジニア：正社員と副業のケース
次にフロントエンドエンジニアと正社員をやりながら副業をやっていくケースを想定します。
これは先ほどの正社員での年収にプラスして、フロントエンドエンジニアとして副業で稼働したときの給料を計算するような形になります。
正社員をやりながら副業でやる場合、最高でも週2日ぐらいの稼働になると思うので、1日8時間だとして16時間とそれに対する時間単価（＝時給のようなものです）が報酬になります。
新卒1年目から3年目ぐらいまでの報酬が大体2500円から4000円ぐらいまでが目指せるので、新卒3年目で時間単価3500円をモデルにすると、副業を合わせて、668万円程度になります。
- 正社員年収400万円 + 副業収入(週2 x 8時間 x 4週 * 12ヶ月 ) = 668万円
フロントエンドエンジニアのフリーランスの相場
フロントエンドエンジニアのフリーランスの相場ですが、これも年数によって変わりますが副業とほぼ同じなので、例えば新卒3年目ぐらいの人が独立した場合は、時間単価が仮に4000円だとして、4000円×週5日で入るので、
- フリーランス年収 = 8時間 × 週5日 × 4週 x 12ヶ月 * 4000円 = 768万円
程度になります。
フロントエンドエンジニアの派遣社員の給与相場
次に派遣社員の相場です。フロントエンドエンジニアで派遣社員になる場合だと、時給が2500円プラスから3000円ぐらいになります。ただしこの場合、雇用保険などの計算も含まれていないので、それにプラス各種福利厚生が上乗せされるような形になると思います。
また、派遣社員の場合だと基本的に未経験からなるケースと、時間の都合で稼働量を減らしているケースがあるので、そういうところまで含めて考えると、年収相場は大体400から500万円ぐらいになるのではないかと思います。
フロントエンドエンジニアに向いている人の特徴
次にフロントエンドエンジニアに向いている人について解説していきたいと思います。
知的好奇心が高い人（＝最新情報のキャッチアップができるから）
まずフロントエンドエンジニアを目指す人にとって一番大事といっても過言ではないのが「知的好奇心」が高い方ですね。
フロントエンド（特にJavaScript)の技術的進化というのはものすごく早くて、古い知識が陳腐化するのも非常に早いです。
例えばJQueryというのは10年前ぐらいはもう第一線で使われていましたし、AngularJSなどのようなJavaScriptフレームワークを使われていたんですが、新しい技術がどんどんどんどん増えていくので、少しずつユーザーが減ってきています。
フロントエンドでは、古い技術だけで食っていくというのは非常に難しいです。
なので新しい技術をちゃんとキャッチアップできるかどうかというのは、フロントエンドエンジニアを目指す人にとっては非常に重要かなというふうに思います。
UI, UXに対してのこだわりがある人（＝使いやすいアプリを作れるため）
次に使いやすさに対してこだわりが強い方、UI UXへのこだわりがある方がフロントエンドエンジニアに向いていると思います。
これは例えばユーザーが使ったときに不便ではないかな、デザインがここだけ1個だけちょっとずれてるな、気持ち悪いなというふうに感じられることが非常に重要になってきます。
デザインが好きな人（＝コードxデザインが書けると強いため）
また、デザインが好きかどうかというのも大事かなと思っています。デザインされているものをちゃんと意図を明確に認識し、伝えられるようなコーディングをしたりとかしていくことというのは、フロントエンドエンジニアには重要になってます。
フロントエンドエンジニアに向いていない人の特徴
逆にフロントエンドエンジニアに向いていない人について説明します。
知的好奇心が低い
知的好奇心が低い方ですね。これは最新の技術がキャッチアップできないので、古い知識だけで食っていこうとするとすぐに廃れてしまうので、あまり向いていないと思います。
使いやすさに対してこだわりがない
使いやすさに対してあまりこだわりがない方も、フロントエンドエンジニアにとってあまり向いていないと思います。例えば、より使いやすいインタラクションにすることや、開発の容易さを考慮することへの興味がない場合、HTMLやCSSができる程度ではフロントエンドエンニアになれるかもしれませんが、AIの時代に将来的に競争力を持つのは非常に難しいと思います。
デザインのずれに気づけない方
次に、デザインマークアップの違和感に気づかない方ですね。例えば、1ピクセルずれていて視認性が損なわれていることや、デザイン原則に反していることへ気づけない場合、自分で修正することができないので、この感覚は非常に重要になってきます。
ただし、初心者の場合はすぐに身につくものではないので、長くコーディングをしていてもこうした点に気づけない場合はフロントエンドエンジニアには向いていないと言えるでしょう。
ユーザーに興味がない方
次に、システムのみならず、ユーザー、人間にも興味がない方ですね。コードを書くこと自体は好きだけれども、ユーザーや人間に興味がない方は、作成するもので成果を出すことが非常に難しくなります。フロントエンドエンジニアリングでは、ユーザーの体験まできちんと定義しなければ、実装したものが使われないことも多いため、その面できちんと実装できるようにしていく必要があります。
フロントエンドエンジニアに必要な資格
DAI
フロントエンドエンジニアとして「就職」するために、資格は必要ありません。
あまりでない意見かと思いますが、補足すると未経験のエンジニアが資格を持っていたとしても、採用担当は評価しないので、資格を取る努力をするくらいであれば、就職するための順位をした方がよいでしょう。
ただし、よりWebの知識や周辺の知識を身に付けたい！という場合は、以下の資格を取得するとよいでしょう。
- 基本情報技術者試験
- ウェブ解析士
- Webクリエイター能力認定試験
基本情報技術者試験
Webに関わる周辺の知識がバランスよく問われるし試験です。ひよっこのエンジニアであれば、できればとっておきたい資格です。新しい知識を学ぶ際に、土台となる知識を効率よく獲得できる資格になります。
コンピュータか科学、ネットワーク、でデータベースなど、情報科学の基礎を一気に理解ししい人にはおすすめの資格です。
ウェブ解析士
Webサイトのアクセス解析などに関する資格です。特にコーダーの方であれば、ぜひ取得すると良いと思います。クライアントはホームページやランディングページの作成を依頼してきますが、本来の目的は集客のけケースが多いです。集客に強いフロントエンドエンジニアは非常に受けがよいので、ぜひ確認してみてください。
Webクリエイター能力認定試験
HTMLやCSSのコーディングや、Webデザインに関して問われる試験です。
未経験からフロントエンドエンジニアになるには？
次に未経験からフロントエンドエンジニアになるにはどんな準備が必要か解説していきたいと思います。まず前提、エンジニアに未経験から就職する場合、必ず自分で独学してアプリケーションもしくはホームページが作れるレベルまで持っていく必要があるので、そこをゴールに学習していくと良いでしょう。
フロントエンドエンジニアが学習すべきプログラミングの基礎
まずやることとしてはプログラミングの基礎を学びます。具体的に学ぶ項目としては以下のと通りです。
- HTML
- CSS
- JavaScript
- jQuery(コーダーを目指す場合)
- Reactもしくは Vue(Webアプリケーション開発のフロントエンドエンジニアを目指す場合)
- Linuxコマンド
コーダーを目指す場合はウェブサーバーを借りてきて、静的ファイルをアップロードしてウェブページを公開するまでの経験が必要です。
ウェブ系のフロントエンドエンジニアであれば、PaaSを利用してウェブアプリケーションをデプロイする経験が必要になってくるのでそれを学習してみましょう。
余裕があればプログラミングスクールへか通う
プログラミングの基礎を学んだら、次はがっつりと就職に必要な知識を学んでいくと良いと思います。
その場合プログラミングスクールに通うのが一つの選択肢となります。
プログラミングスクールはいきなり通うのではなく、まずは基礎を学んでからプログラミングスクールに通うと良いでしょう。
なぜかというとプログラミングスクールに入っても挫折する可能性が非常に高いので、ある程度自分でやった上でダメだったら、そこからさらに伸ばすという意味でプログラミングスクールに入ると良いと思います。
個人的にお勧めなのはプログラミングスクールだとRUNTEQです。バックエンドのエンジニアの知識とフロントエンドのエンジニアの知識の両方を学ぶことができます。
フロントエンドエンジニア単体として未経験で入るよりもバックエンドが欠けた上でフロントエンドができた方が、個人的には採用されやすいと思うのでそちらで進めてみると良いと思います。
オリジナルアプリ・ホームページの作成
次にオリジナルアプリ、ホームページを作成しましょう。
コーダーの場合はホームページを作成するが良いと思います。ウェブサイトにお名前.comやXサーバーなどのようなサーバー屋さんからドメインを借りてサーバーにファイルをアップロードして、ホームページが誰でも見えるように公開したものをポートフォリオとして用意しておくと良いと思います。
ウェブアプリケーションエンジニアであれば、HerokuなどのPaaSサービスをデプロイしておくと良いと思います。
ここまでがエンジニアの採用担当が見る観点で、ここまでがないと多分採用されることは難しいです。
ポートフォリオの作成
次にポートフォリオを作成します。ポートフォリオとは、就活で使う履歴書のようなもの、職務系履歴書のようなものになります。具体的にはどういう技術を今まで学んできたか、どういうサービスを作ってきたかというものをまとめていくようなものになります。ポートフォリオの作り方については関連記事をご覧ください。
フロントエンドエンジニアの将来性
次にフロントエンドエンジニアの将来性について解説していきたいと思います。
将来性については厳密に明るいか暗いかという断定はしづらいです。フロントエンドエンジニアの将来性がないというのは、10年20年前ぐらいからずっと言われていますが、いまだにフロントエンドエンジニアの需要は大きく高まっているので、将来性がないとは言い切れないし、あるとも言えないという状況になっています。
それぞれフロントエンドエンジニアの将来性が明るいと思っている派の意見と暗いと思っている派の意見、あとは私の見解について解説できればと思います。
フロントエンドエンジニアの将来性は明るいという意見
一つ目が短期視点で見ると需要が高いという話です。フロントエンドエンジニア、特にコーダーやウェブ系のフロントエンドエンジニアリングの需要というのは、DXの文脈においていろんな会社が、特にデジタルではない会社がIT投資を増やしているという状況を踏まえると、需要が高まっているというふうに見てもおかしくないと思います。需要が増えればフロントエンドエンジニアの仕事量も増えますし、単価も増えるということになります。
もう一つがUI/UXへの投資が増加しているという意見です。2000年代と比べると2020年代は非常にアプリケーションがより複雑になり、またスマホアプリのように、サクサク動くようなアプリケーションの開発が求められています。
その際にどうしてもフロントエンドの開発がうまくいかないと、そこのユーザーの体験が損なわれてしまうため、多くの企業ではフロントエンドエンジニアを起用してユーザー体験を上げている傾向があります。このトレンドは将来的に大きく変わることはそこまでないと思います。これらが明るいと言われている観点になります。
フロントエンドエンジニアの将来性は暗いという意見
まず一つ目がフロントエンドフレームワークの移り変わりが激しいというのがあります。これは例えばReactやVueのようなJavaScriptのライブラリが特にそうなのですが、フロントエンドのフレームワークが人気になってからすぐに廃されてしまったりとか、唐突に仕様の変更を行われてその言語をそのまま使い続ける意思決定をできなくなったりするケースがここ最近増えています（2024年2月現在）。
そのためフロントエンドフレームワークを採用すること自体に対してネガティブに捉える会社も増える可能性はないとは言い切れません。そのためフロントエンドフレームワークを使わずに、なるべくサーバーサイドのほうでコーディングをしていくようなトレンドも将来的にあるかもしれないということは考慮しておくとよいでしょう。
また、AIによってフロントエンドのコーディングが自動化されているからというのがあります。最近ではVisual Studio Codeのようなプログラミングのエディターを使ってコードを書いていると、AIによってコードが自動で生成されるような機能があります。(Github Copilot)
それらの機能を使ってコーディングをすると、HTMLとCSSをほぼ書かなくても勝手にコーディングができてしまうような状況になっています。もうすでに、Webのデザインを生成AIが学習してHTMLとCSSを自動で吐き出すようなことも既に行われているケースもあります（ただし実用レベルにはなっていない）
よって、HTMLとCSSとJavaScriptが書けるだけだと、今後フロントエンドエンジニアとして仕事を取る場合、AIに負けてしまうので、大変だという話はあると思います。
またノーコードやローコードのようなツールが普及することで、そもそもエンジニアがコードを書かなくても、ホームページのコーディングができてしまうようなアプリケーションが生まれています。例えばStudioのようなサービスを使うと、エンジニアは一切コードを書かずに、ウェブデザインが作れてしまうこともあります。
フロントエンドエンジニアの将来性に対する個人的な見解
フロントエンドエンジニアの将来性という観点では、ただHTMLやCSS、JavaScriptを書けるだけだと、将来性は非常に低くなってしまうのではないかと思います。
例えば、デザインに書いてある通りにHTML、CSS、JavaScriptを使ってホームページを作るというような業務は、今後AIが賢くなるにつれて、より自動化されやすくなる可能性が出てきます。したがって、デザインから入ってコーディングをする、もしくはウェブアプリケーションのように複数のコンポーネント部品を使って、それをいろんなサーバーサイドと組み合わせて作るような経験がないと、フロントエンドエンジニアとして生き残っていくのは非常に難しくなると思います。
高技能フロントエンドエンジニアの将来性は非常に明るいですが、低技能フロントエンドエンジニアの将来性は今後はかなり低いと思います。
